<template>

  <el-dialog title="按钮权限设置" :visible.sync="dialogVisible">
  	<el-tree
      ref="nodeTree"
      show-checkbox
      node-key="id"
      :default-checked-keys="form.nodeIds"
      :default-expanded-keys="form.nodeIds"
      :data="nodeTree"
      :props="defaultProps">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>

import ApiMain from '@/api/system.role';
import NodeApiMain from '@/api/system.node';

export default {
  mixins: [
  ],
  data () {
    return {

      dialogVisible: false,
      loading: false,
      form: {},
      nodeTree: [],
      defaultProps: {
	      children: 'children',
	      label: 'title'
	    }

    }
  },
  mounted () {
  	this.fetchMenuTreeOptions()
  },
  methods: {

    show (id) {

    	this.reset();

      if (id) {
        this.id = id;
        this.fetchData();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
    	this.form = {}
    },

    async fetchData () {
    	this.loading = true;

      try {
        var re = await ApiMain.getAccess({id: this.id, showStatus: 0});
        this.data = re;
      } catch (err) {
        this.data = null;
      }
      if (this.data) {
      	this.form = {
      		id: this.id,
      		nodeIds: this.data
      	}
      	this.$refs.nodeTree.setCheckedKeys(this.form.nodeIds, true)
      }

      this.loading = false;

    },

    fetchMenuTreeOptions () {
    	NodeApiMain.getButtonNodeTree().then(re => {
        this.nodeTree = re;
      })
    },

    async submit () {
      await ApiMain.setAccess({id: this.id , nodeIds: this.$refs.nodeTree.getCheckedKeys(true).join(','), showStatus: 0})
    	this.$message({message: '设置成功', type: 'success'});
      this.close();
    }

	}
}

</script>